<template>
  <div class="news-list">
    <!-- 面包屑 -->
    <div class="bread-crumb container">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>{{ $t("yunLianUsedMachine") }}</el-breadcrumb-item>
        <el-breadcrumb-item to="/news">{{ $t("news") }}</el-breadcrumb-item>
        <el-breadcrumb-item>{{ categoryName == "1" ? $t("industryNews") : $t("transactionCase") }}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!-- 图文列表 -->
    <div class="article-list container">
      <div class="title">{{ categoryName == "1" ? $t("industryNews") : $t("transactionCase") }}</div>
      <section class="list">
        <a class="item" v-for="item in articleList" :key="item.id" :href="`/news-detail/${item.id}`" :title="item.title">
          <div class="pic">
            <el-image class="info-img" fit="cover" :src="item.imageUrl" lazy :alt="item.title"></el-image>
          </div>
          <div class="info-bottom">
            <div class="article-title">{{ item.title }}</div>
            <div class="category-name">{{ item.categoryName == "1" ? $t("industryNews") : $t("transactionCase") }}</div>
            <div class="release-time">
              <span>{{ item.releaseTime }}</span>
              <div class="button-next">
                <i class="arrow el-icon-arrow-right"></i>
              </div>
            </div>
          </div>
        </a>
      </section>
    </div>
    <!-- 分页器 -->
    <section class="container">
      <TablePage ref="list" @page-change="getEquipmentListData" :total="total" :pageSizeNum="pageSizeNum"> </TablePage>
    </section>
    <!-- 侧边栏服务 -->
    <Dangling v-if="locale == 'zh-CN'" />
    <!-- WhatsApp -->
    <!-- <WhatsApp v-if="locale == 'en-US'" /> -->
    <!-- 在线客服 -->
    <Connect />
  </div>
</template>

<script>
import { mapState } from "vuex"
export default {
  name: "NewsList",
  layout: "Layout",
  components: {},
  data() {
    return {}
  },
  head() {
    return {
      title: this.$i18n.t("headTitle"),
      meta: [
        {
          hid: "keywords",
          name: "keywords",
          content: this.$i18n.t("haeaKeyContent")
        },
        {
          hid: "description",
          name: "description",
          content: this.$i18n.t("haeaDecContent")
        }
      ]
    }
  },
  async asyncData({ app, params }) {
    let paramsRes = params.listParams
    console.log("paramsRes", paramsRes)
    let total = 0
    let pageSizeNum = 10
    let categoryName = paramsRes
    let articleList = []
    try {
      const equipmentParams = {
        pageNo: 1,
        pageSize: pageSizeNum,
        sort: "id desc",
        search: {
          categoryName
        }
      }
      let { data } = await app.$api.articleList({ ...equipmentParams })
      articleList = data.list || []
      total = data.total
    } catch (error) {
      console.log(error)
    }
    return {
      total,
      pageSizeNum,
      categoryName,
      articleList
    }
  },
  props: {},
  computed: { ...mapState(["locale"]) },
  async mounted() {
    this.getPoint()
  },
  methods: {
    async getEquipmentListData(page, pageSize) {
      const params = {
        pageNo: page,
        pageSize: pageSize,
        sort: "id desc",
        search: {
          categoryName: this.categoryName
        }
      }
      try {
        let {
          data: { list, total }
        } = await this.$api.articleList(params)
        this.articleList = list || []
        this.total = total
      } catch (error) {
        console.log(error)
      }
    },
    async getPoint() {
      let params = await this.$optionPoint.sendUrl(window, navigator, document)
      this.$api.burySave({ ...params }).then((res) => {})
    }
  },
  watch: {}
}
</script>

<style lang="scss" scoped>
.news-list {
  .bread-crumb {
    margin-top: 30px;
  }
  .article-list {
    margin-top: 30px;
    .title {
      font-size: 22px;
      font-weight: 600;
      color: #333;
      line-height: 24px;
    }
    .list {
      margin-top: 20px;
      .item {
        width: 100%;
        height: 100%;
        margin-bottom: 20px;
        display: flex;
        align-items: center;
        .pic {
          display: block;
          overflow: hidden;
          width: 40%;
          height: 300px;
          .info-img {
            width: 100%;
            height: 100%;
            display: block;
            transition: all 0.3s ease 0s;
            -webkit-transition: all 0.3s ease 0s;
            &:hover {
              transform: scale(1.05);
              -webkit-transform: scale(1.05);
            }
          }
        }
        .info-bottom {
          width: 60%;
          height: 300px;
          background: #f6f7f9;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          padding: 20px;
          box-sizing: border-box;
          .article-title {
            font-family: PingFangSC, PingFang SC;
            font-weight: 500;
            font-size: 18px;
            color: #333;
            line-height: 24px;
          }
          .category-name {
            flex: 1;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 14px;
            color: #999;
            line-height: 16px;
            margin-top: 20px;
          }
          .release-time {
            display: flex;
            align-items: center;
            justify-content: space-between;
            span {
              font-family: PingFangSC, PingFang SC;
              color: #6e6e6e;
              font-size: 14px;
            }
            .button-next {
              width: 20px;
              height: 20px;
              color: #cbe6ff;
              border: 2px solid #cbe6ff;
              border-radius: 50%;
              position: relative;
              &:hover {
                border-color: #183883;
                color: #183883;
              }
              .arrow {
                position: absolute;
                left: 50%;
                top: 50%;
                margin-top: -7px;
                margin-left: -6px;
                font-size: 14px;
                font-weight: 600;
                color: inherit;
              }
            }
          }
        }
        &:last-child:nth-child(4n - 1) {
          margin-right: calc(24% + 4% / 3);
        }
        &:last-child:nth-child(4n - 2) {
          margin-right: calc(48% + 8% / 3);
        }
      }
    }
  }
}
</style>
